import 'package:flutter/material.dart';
import 'package:flutter_09_game/pages/home/home_logic.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:get/get.dart';
import '../../../config/app_color.dart';
import '../models/model_home_banner.dart';
import '../../../widgets/button/debounce_gesture_detector.dart';
import '../../../widgets/image/image_view.dart';

class HomeBanner extends StatelessWidget {
  const HomeBanner({
    super.key,
    required this.banners,
    // this.autoPlay = true,
    // this.autoPlayInterval = const Duration(seconds: 3),
    this.onBannerTap,
    required this.logic,
  });

  final List<ModelHomeBanner> banners;
  final Function(ModelHomeBanner)? onBannerTap;
  final HomeLogic logic;

  @override
  Widget build(BuildContext context) {
    if (banners.isEmpty) {
      return const SizedBox.shrink();
    }

    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      height: 125.w,
      width: double.infinity,
      child: Stack(
        children: [
          Positioned.fill(
              child: CarouselSlider.builder(
            // carouselController: _carouselController,
            options: CarouselOptions(
              height: 125.w,

              autoPlay: banners.length > 1,
              // autoPlayInterval: widget.autoPlayInterval,
              // autoPlayAnimationDuration: const Duration(milliseconds: 300),
              autoPlayCurve: Curves.easeInOut,
              // enlargeCenterPage: false,
              viewportFraction: 1.0,
              enableInfiniteScroll: banners.length > 1,
              onPageChanged: (index, reason) {
                // setState(() {
                //   _currentIndex = index;
                // });
                logic.selectBannerRx.value = index;
              },
            ),
            itemCount: banners.length,
            itemBuilder: (context, index, realIndex) {
              return _buildBannerItem(banners[index]);
            },
          )),
          Positioned(
            bottom: 8.w,
            left: 0,
            right: 0,
            child: Visibility(
                visible: banners.length > 1, child: _buildIndicators()),
          )
        ],
      ),
    );
  }

  Widget _buildBannerItem(ModelHomeBanner banner) {
    return DebounceGestureDetector(
      onTap: () => onBannerTap?.call(banner),
      child: ImageView(
        imageUrl: banner.image!,
        fit: BoxFit.cover,
        width: double.infinity,
        radius: 8.w,
      ),
    );
  }

  Widget _buildIndicators() {
    // return Obx(() {
    return Obx(() {
      return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List.generate(
          banners.length,
          (index) => Container(
            margin: EdgeInsets.symmetric(horizontal: 2.w),
            width: logic.selectBannerRx.value == index ? 16.w : 6.w,
            height: 6.w,
            decoration: BoxDecoration(
              color: logic.selectBannerRx.value == index
                  ? AppColor.primary
                  : AppColor.primary.withOpacity(0.3),
              borderRadius: BorderRadius.circular(3.w),
            ),
          ),
        ),
      );
    });
    // });
  }
}
